<template>
  <div id="app">
    <div class="header">
      <div class="header-content">
        <a class="logoImg" href="javascript: void(0);">
          <img src="./assets/img/logo2.png" alt="logo" />
        </a>
        <div class="search">
          <!-- <input type="text" value="" name="keyword" id="keyword" placeholder="请输入搜索关键词" maxlength="100">
          <div class="search-btnTab">
            <button href="javascript:void(0);" class="search-but" rel="nofollow" id="btn-search">
              <i class="layui-icon" style="font-size: 14px; color: #fff;">&#xe615;</i>
              搜索
            </button>
          </div> -->
          <Input search enter-button placeholder="请输入搜索关键词" />
        </div>
      </div>
    </div>
    <div class="navbo">
      <div class="nav-content">
        <ul class="nav-ul">
          <li class="nav-item"><a href="javascript: void(0);">首页</a></li>
          <li class="nav-item">
            <Dropdown>
              <div class="nav-org">
                组织机构
                <Icon type="ios-arrow-down"></Icon>
              </div>
              <DropdownMenu slot="list">
                <DropdownItem>领导小组</DropdownItem>
                <DropdownItem>文化站</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </li>
          <li class="nav-item"><a href="javascript: void(0);">相关制度</a></li>
          <li class="nav-item"><a href="javascript: void(0);">工作动态</a></li>
          <li class="nav-item"><a href="javascript: void(0);">宣传品审批</a></li>
        </ul>
        <!-- <div class="nav-ul">
          <ul class="nav nav-pills">
            <li class="active"><a href="javascript: void(0);">首页</a></li>
            <li role="presentation" class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                组织机构<span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="leader">领导小组</a></li>
                <li><a href="culture">文化站</a></li>
              </ul>
            </li>
            <li><a href="rules">相关制度</a></li>
            <li><a href="work">工作动态</a></li>
            <li><a href="apply">宣传品审批</a></li>
          </ul>
        </div> -->
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less">
#app {
  width: 100%;
  height: auto;
  background: #fff;
  .header{
    width: 100%;
    height: 104px;
    /* background: url("./assets/img/header-bg.jpg") repeat-x;*/
    background: #f2f2f2;
    .header-content{
      width: 1050px;
      margin: 0 auto;
      zoom: 1;
      &::before{
        content: "";
        display: table;
      }
      &::after{
        content: "";
        display: table;
        clear: both;
      }
      .logoImg{
        float: left;
        display: block;
        height: 104px;
        line-height: 104px;
      }
      .search{
        float: right;
        margin-top: 32px;
        width: 340px;
      }
    }
  }
  .navbo{
    height: 44px;
    background: url('./assets/img/nav-bg.jpg') repeat-x;
    border-top: 4px solid #2d8cf0;
    .nav-content{
      width: 1050px;
      margin: 0 auto;
      .nav-ul{
        width: 100%;
        height: 40px;
        zoom: 1;
        &::before{
          content: "";
          display: table;
        }
        &::after{
          content: "";
          display: table;
          clear: both;
        }
        .nav-item{
          float: left;
          width: 120px;
          height: 40px;
          .nav-org{
            width: 100%;
            height: 40px;
            color: #222;
            text-align: center;
            font-size: 16px;
            line-height: 40px;
          }
          a{
            display: block;
            line-height: 40px;
            font-size: 16px;
            color: #222;
            text-align: center;
          }
        }
      }
    }
  }
}

</style>
